<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;

/* @var $this yii\web\View */
/* @var $model app\models\AsrAudio */
/* @var $form yii\widgets\ActiveForm */
$maxK = 0;
foreach ($keyword_ids_arr as $k => $v) {
    $maxK = $k;
}
?>

<div class="asr-audio-form">

    <a id="back" class="btn btn-default pull-left" href="index?page=<?php echo isset($_GET['page'])?$_GET['page']:0; ?>&per-page=<?php echo isset($_GET['per-page'])?$_GET['per-page']:0; ?>" ><i class="fa fa-backward"></i> 返回上一页</a> <br/><br/>

    <?php $form0 = ActiveForm::begin([]); ?>

    <?= $form0->field($model, 'name')->textInput(['maxlength' => true]) ?>

    <?=$form0->field($model, 'audio_classify_id')->dropDownList(\yii\helpers\ArrayHelper::map(\app\models\AsrAudioClassify::find()->all(), 'audio_classify_id', 'name'))->label('选择流程种类');?>

    <div class="form-group">
        <?= Html::button('保存名称分类', ['class' => 'btn btn-info','id'=>'save_name']) ?>
    </div>

    <?php ActiveForm::end(); ?>

    <?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]); ?>

    <div id="asr" class="form-group">
        <label class="control-label">添加需要过滤的关键字并且上传根据其回答的对应的语音文件</label>
        <?php
        use yii\bootstrap\Collapse;

        foreach ($keyword_ids_arr as $k => $v){
            $items = [];
            $items[] = [
                'label' => '关键字与语音'.$k,
                'content' => [
                    '<iframe src="update-iframe?id='.$model->audio_id.'&order='.$k.'" width="100%" height="400px"
                frameborder="no" border="0" marginwidth="0" marginheight="0"></iframe>',
                ]
            ];
            echo Collapse::widget([
                'items' =>
                    $items
                ,
            ]);
        }
        ?>
    </div>

    <!-- !   添加需要过滤的关键字并且上传根据其回答的对应的语音文件-->

    <button type="button" id="addKeywordAnd" class="btn btn-default" style="position: relative;"><i class="fa fa-plus"></i> 新增关键字与语音</button>

    <!-- !   按钮-->

    <div id="asr" class="form-group">
        <label class="control-label" >当完全没有检测到关键字</label>
        <?php
        $items = [];
        $items[] = [
            'label' => '语音文件上传',
            'content' => [
                '<iframe src="update-iframe2?id='.$model->audio_id.'" width="100%" height="400px"
            frameborder="no" border="0" marginwidth="0" marginheight="0"></iframe>',
            ]
        ];
        echo Collapse::widget([
            'items' => $items
        ]);
        ?>
    </div>
    <!-- !   当完全没有检测到关键字-->
    <!-- !   保存-->

    <?php ActiveForm::end(); ?>
</div>


<!-- !   以下是js-->
<script>
    $("#save_name").click(function () {
        $("#w0").attr("action","update-name?id=<?= $model->audio_id?>");
        $(this).submit();
    });
    var call_num = <?= $maxK?>;
    $("#addKeywordAnd").click(function(){
        call_num++;
        var sDiv = $("#asr");
        //将内容添加到后面
        sDiv.append(getHtml(call_num));
        document.getElementById("select_files_"+call_num).className.replace(/\bfile-loading\b/,"");
        //给内容添加事件
        $("#addKeyword_"+call_num).click(function() {
            var keyword = $("#asrkeyword-name_"+call_num).val();
            if($("#delete_"+call_num+"_"+keyword).length ==0 && keyword!=""){
                $("#keyword_"+call_num).append("<li><input  name='AsrKeyword[name]["+call_num+"][]' readonly='readonly' value='"+keyword+" '  style='border:0px;margin:10px 4px;'><span class='pull-right badge bg-red' id='delete_"+call_num+"_"+keyword+"' style='border:0px;margin:10px 4px;'>删除</span></input></li>");
                $("#delete_"+call_num+"_"+keyword).click(function() {
                    $(this).parent().remove();
                });
            }else{
                alert("请重新输入关键字！");
                $("#asrkeyword-name_"+call_num).focus();
            }
        });
        //绑定按钮的点击事件让上传按钮隐藏
        $("#select_files_"+call_num).bind('click',function () {
            $("button[title='上传选中文件']").hide();
        })
        //将文件添加进input里面
        jQuery(function ($) {
            if (jQuery('#select_files_'+call_num).data('fileinput')) { jQuery('#select_files_'+call_num).fileinput('destroy'); }
            jQuery('#select_files_'+call_num).fileinput(fileinput_05740241);
        });
        // id前缀为delete_的所有i的jquery对象
        $("#delete_"+call_num).click(function () {
            if(confirm("确定删除关键字与语音")){
                $(this).parent().parent().parent().parent().parent().remove();
            }
        });
    });

    function getHtml(num){
        var table = '<iframe src="update-iframe?id=<?= $model->audio_id?>&order='+num+'" width="100%" height="400px" frameborder="no" border="0" marginwidth="0" marginheight="0"></iframe>';
        //绑定按钮的点击事件让上传按钮隐藏
        var html=
            "<div id=\'w"+num+"\' class=\'panel-group collapse in\' aria-expanded=\'true\' style=\'\'>"+
            "<div class=\'panel panel-default\'>" +
            "<div class=\'panel-heading\'>" +
            "<h4 class=\'panel-title\'>" +
            "<a href=\'#\'  class=\'pull-right btn-box-tool\'><i class=\'fa fa-times\' id=\'delete_"+num+"\'></i></a>"+
            "<a class=\'collapse-toggle\' href=\'#w"+num+"-collapse"+num+"\' data-toggle=\'collapse\' data-parent=\'#w"+num+"\'>关键字与语音"+num+"</a>"+
            "</h4>" +
            "</div>"+
            "<div id=\'w"+num+"-collapse"+num+"\' class=\'panel-collapse collapse\'>" +
            "<ul class=\'list-group\'>"+
            "<li class=\'list-group-item\'>" +
            table +
            "</li>"+
            "</ul>"+
            "</div>" +
            "</div>"+
            "</div>";
        return html;
    }

</script>